<div class="popover-demo">
  <section>
    <h4>最简单的用法，浮层的大小由内容区域决定。</h4>
    <div style="padding: 10px 100px;">
      <hi-popover [hiTitle]="'Title'">
        <button class="btn btn-primary" hi-popover>Hover me</button>
        <ng-template #hiTemplate>
          <div>
            <p>Content</p>
            <p>Content</p>
          </div>
        </ng-template>
      </hi-popover>
    </div>
  </section>

<section>
    <h4>触发方式：鼠标移入、聚集、点击。</h4>
    <div style="padding: 10px 100px;">
        <hi-popover [hiTitle]="'Title'" [hiTrigger]="'click'">
            <button class="btn btn-primary" hi-popover>click me</button>
            <ng-template #hiTemplate>
              <div><p>Content</p>
                <p>Content</p></div>
            </ng-template>
        </hi-popover>
        <hi-popover [hiTitle]="'Title'" [hiTrigger]="'hover'">
            <button class="btn btn-primary" hi-popover>Hover me</button>
            <ng-template #hiTemplate>
              <div><p>Content</p>
                <p>Content</p></div>
            </ng-template>
        </hi-popover>
        <hi-popover [hiTitle]="'Title'" [hiTrigger]="'focus'">
            <button class="btn btn-primary" hi-popover>focus me</button>
            <ng-template #hiTemplate>
              <div><p>Content</p>
                <p>Content</p></div>
            </ng-template>
        </hi-popover>
    </div>
  </section>
  
  <section>
        <h4>从浮层内关闭。</h4>
        <div style="padding: 10px 100px;">
            <hi-popover [hiTitle]="'Title'" [(hiVisible)]="visible" [hiTrigger]="'click'">
                <button class="btn btn-primary" hi-popover>click me</button>
                <ng-template #hiTemplate>
                    <a (click)='clickMe()'>Close</a>
                </ng-template>
            </hi-popover>
        </div>
      </section>

  <section>
    <h4>十二个方向。</h4>

    <div style="padding: 10px 100px;">
            <div style="margin-left: 60px">
                    <hi-popover [hiTitle]="'Title'" [hiPlacement]="'topLeft'">
                    <button class="btn btn-primary" hi-popover>TL</button>
                    <ng-template #hiTemplate>
                      <div><p>Content</p>
                        <p>Content</p></div>
                    </ng-template>
                  </hi-popover>
                    <hi-popover [hiTitle]="'Title'" [hiPlacement]="'top'">
                    <button class="btn btn-primary" hi-popover>Top</button>
                    <ng-template #hiTemplate>
                      <div><p>Content</p>
                        <p>Content</p></div>
                    </ng-template>
                  </hi-popover>
                    <hi-popover [hiTitle]="'Title'" [hiPlacement]="'topRight'">
                    <button class="btn btn-primary" hi-popover>TR</button>
                    <ng-template #hiTemplate>
                      <div><p>Content</p>
                        <p>Content</p></div>
                    </ng-template>
                  </hi-popover>
                </div>
                <div style="width: 60px; float: left;">
                    <hi-popover [hiTitle]="'Title'" [hiPlacement]="'leftTop'">
                    <button class="btn btn-primary" hi-popover>LT</button>
                    <ng-template #hiTemplate>
                      <div><p>Content</p>
                        <p>Content</p></div>
                    </ng-template>
                  </hi-popover>
                    <hi-popover [hiTitle]="'Title'" [hiPlacement]="'left'">
                    <button class="btn btn-primary" hi-popover>Left</button>
                    <ng-template #hiTemplate>
                      <div><p>Content</p>
                        <p>Content</p></div>
                    </ng-template>
                  </hi-popover>
                    <hi-popover [hiTitle]="'Title'" [hiPlacement]="'leftBottom'">
                    <button class="btn btn-primary" hi-popover>LB</button>
                    <ng-template #hiTemplate>
                      <div><p>Content</p>
                        <p>Content</p></div>
                    </ng-template>
                  </hi-popover>
                </div>
                <div style="width: 60px; margin-left: 252px;">
                    <hi-popover [hiTitle]="'Title'" [hiPlacement]="'rightTop'">
                    <button class="btn btn-primary" hi-popover>RT</button>
                    <ng-template #hiTemplate>
                      <div><p>Content</p>
                        <p>Content</p></div>
                    </ng-template>
                  </hi-popover>
                    <hi-popover [hiTitle]="'Title'" [hiPlacement]="'right'">
                    <button class="btn btn-primary" hi-popover>Right</button>
                    <ng-template #hiTemplate>
                      <div><p>Content</p>
                        <p>Content</p></div>
                    </ng-template>
                  </hi-popover>
                    <hi-popover [hiTitle]="'Title'" [hiPlacement]="'rightBottom'">
                    <button class="btn btn-primary" hi-popover>RB</button>
                    <ng-template #hiTemplate>
                      <div><p>Content</p>
                        <p>Content</p></div>
                    </ng-template>
                  </hi-popover>
                </div>
                <div style="margin-left: 60px; clear: both;">
                    <hi-popover [hiTitle]="'Title'" [hiPlacement]="'bottomLeft'">
                    <button class="btn btn-primary" hi-popover>BL</button>
                    <ng-template #hiTemplate>
                      <div><p>Content</p>
                        <p>Content</p></div>
                    </ng-template>
                  </hi-popover>
                    <hi-popover [hiTitle]="'Title'" [hiPlacement]="'bottom'">
                    <button class="btn btn-primary" hi-popover>Bottom</button>
                    <ng-template #hiTemplate>
                      <div><p>Content</p>
                        <p>Content</p></div>
                    </ng-template>
                  </hi-popover>
                    <hi-popover [hiTitle]="'Title'" [hiPlacement]="'bottomRight'">
                    <button class="btn btn-primary" hi-popover>BR</button>
                    <ng-template #hiTemplate>
                      <div><p>Content</p>
                        <p>Content</p></div>
                    </ng-template>
                  </hi-popover>
            </div>
      <div>
      </div>
    </div>

    <ng-template #popTitle let-context>
      From {{context.target}}!
    </ng-template>

    <ng-template #popContent let-context>
      Hello {{name}}.
    </ng-template>

    <ng-template #popContent2 let-context>
      <input type="text" [(ngModel)]="name"/>
    </ng-template>

  </section>

</div>
